<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" href="../../javascript/plug-ins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="./css/refund.css">
    <script src="../../javascript/jquery.js"></script>
    <script type="text/javascript" src="../../javascript/plug-ins/layui/layui.js"></script>
    <script src="../../js/zyrpublic.js?v=1.0"></script>
    <script src="../../js/zyrfunction.js?v=1.0"></script>
</head>

<body>
    <div class="page-wrap refund">
        <div class="check-box">
            <div class="header-input">
                <span>申请状态</span>
                <el-select v-model="refundFormdata.commodityState" @change="changeStateCheck" placeholder="请选择">
                    <el-option v-for="item in applyStates" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="header-input">
                <span>订单ID</span>
                <el-input v-model="refundFormdata.orderid" type="number"></el-input>
            </div>
            <div class="header-input">
                <span>退款ID</span>
                <el-input v-model="refundFormdata.id" type="text"></el-input>
            </div>
            <div class="header-input">
                <span>用户退货运单号</span>
                <el-input v-model="refundFormdata.express_num" type="text"></el-input>
            </div>
            <div class="header-input">
                <span style="margin-right: 10px;">申请时间</span>
                <el-date-picker v-model="applyTime" type="daterange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
            </div>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        </div>
        <section class="page-hd t">
            <header>
                <h5 class="title mystate">
                    <a :class="currentState == item.value?'active':''" v-for="(item,index) in applyStates"
                        @click="handleStateItem(item.value)">{{item.label}}</a>
                </h5>
            </header>
            <hr>
        </section>
        <div class="refundList">
            <el-table border v-loading="tabLoading" :data="refundList" style="width: 100%" size="small">
                <el-table-column fixed prop="id" label="退款编号(id)" width="280">
                </el-table-column>
                <el-table-column label="收货买家">
                    <template slot-scope="scope">
                        <div>{{scope.row.nickName}}</div>
                        <div>{{scope.row.phone}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="退款商品" width="230">
                    <template slot-scope="scope">
                        <div style="margin: 10px 0;"><span style="font-size: 14px;">订单ID：</span><span
                                class="orderid-text"
                                @click="handleOrderId(scope.row.orderid)">{{scope.row.orderid}}</span></div>
                        <div v-for="item in scope.row.orderInfoList">
                            <img :src="imgURL+item.headimg" alt="" style="width: 50px;height: 50px;">
                            <el-tooltip :content="item.pname" placement="top" effect="light">
                                <span class="goods-title">{{item.pname}}</span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="refundMoney" label="退款金额" width="90">
                </el-table-column>
                <el-table-column prop="intime" label="申请时间" width="165">
                </el-table-column>
                <el-table-column label="备注" width="120">
                    <template slot-scope="scope">
                        <div>{{scope.row.remark}}</div>
                        <div v-for="(item,index) in scope.row.img" :key="index" v-if="scope.row.img">
                            <img style="width:100%;margin:5px 0" onclick="amplificationImg(this)" :src="item">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="售后状态">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.commodityState" @change="changeState(scope.row)">
                            <el-option v-for="item in applyStates" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.commodityState==7||scope.row.commodityState==8"
                            style="color: #7a7f92;" @click="handleCheck(scope.row)" type="text" size="small">查询
                        </el-button>
                        <el-button v-if="scope.row.commodityState==4" @click="handleCheckEMS(scope.row)" type="text"
                            size="small" size="small">查看物流</el-button>
                        <el-button v-if="scope.row.commodityState==4" style="color: #ff4040;"
                            @click="handleConfirmReceive(scope.row)" type="text" size="small">确认收货</el-button>
                        <el-button v-if="scope.row.commodityState==6" @click="handleConfirmRefund(scope.row)"
                            type="text" size="small">确认退款</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                v-model:currentPage="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>

    </div>

    <img alt="" style="display:none" id="displayImg" src="" />

    <script src="../../javascript/axios.min.js"></script>
    <script src="../../javascript/vue.js"></script>
    <script src="../../javascript/elementui.js"></script>
    <script>
        document.write("<script src='js/refundProduct.js?v=" + (+new Date()) + "'></scr" + "ipt>");
    </script>

</body>

</html>